<template>
	<view class="page">
		<hdNavbar title="预约详情" background="#d6eddf" />
		<view class="head">
			<view class="time">
				<view class="time-flex">
					<view class="hour">{{jx2(data.startDate)}}</view>
					<view class="day">{{jx(data.startDate)}}</view>
				</view>
				<view class="time-flex">
					<view class="text">共{{compareTimes(data.startDate,data.endDate)}}小时</view>
					<view class="sum-text"></view>
				</view>
				<view class="time-flex">
					<view class="hour">{{jx2(data.endDate)}}</view>
					<view class="day">{{jx(data.endDate)}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="item-head">
					<view class="head-title">{{data.meeting?.buildingName}}</view>
					<view class="head-type"></view>
				</view>
				<view class="item-content">
					<image class="content-img" :src="path+data?.meeting?.meetingImg"></image>
					<view class="content-time">
						<view class="content-title">预定会议:{{data.meetingName}}</view>
						<view class="time content-title">下单时间:{{data.createTime}}</view>
						<view class="time content-title">开始时间:{{data.startDate}}</view>
						<view class="time content-title">结束时间:{{data.endDate}}</view>
					</view>
				</view>
				<view class="item-order">
					<view>订单号:</view>
					<view>{{data.orderNo}}</view>
				</view>
				<view class="item-order">
					<view>订单状态:</view>
					<view>{{data.status.desc}}</view>
				</view>
				<!-- <view class="item-order">
					<view>支付方式:</view>
					<view>{{data.payStatus.desc}}</view>
				</view>
				<view class="item-order">
					<view>支付时间:</view>
					<view>{{data.payTime}}</view>
				</view> -->
			</view>
			<view class="operation">
				<view class="head-title">自助操作</view>
				<!-- <view class="operation-flex">
          <image
            class="operation-img"
            src="../../assets/details/1.png"
            mode=""
          ></image>
          <view>
            <view class="operation-text">确认到会议室</view>
            <view class="operation-text1"
              >到店后订单开始计费</view
            >
          </view>
          <view class="operation-btn">我已到店</view>
        </view>
		</view> -->
				<view v-show="data?.meeting?.meetingTopic">
					<view class="operation-flex" v-show="data.status.code === 1">
						<view class="flex-left">
							<image class="operation-img" src="../../assets/details/3.png" mode=""></image>
							<view class="operation-content">
								<view class="operation-text">会议室在线开门</view>
								<view v-if="data.tempPwd">
									<view class="content-title pwd-font">
										密码:{{ data.tempPwd }}(订单开始后生效)
									</view>
									<view class="content-title pwd-font">
										输入密码后按#号开门
									</view>
								</view>
							</view>
						</view>
						<view class="flex-right">
							<view class="operation-btn" @click="open()">开门</view>
						</view>
					</view>
					<view class="operation-flex" v-show="data.status.code == 0">
						<image class="operation-img" src="../../assets/details/3.png" mode=""></image>
						<view class="operation-text">确认签到后，可获取密码</view>
						<view class="operation-btn" @click="order(1, data.orderNo)">签到</view>
					</view>

				</view>
				<view class="operation-flex" v-show="!data?.meeting?.meetingTopic">
					<view class="price operation-text">请联系物业开门</view>
					<image @click="callPhone()" style="width: 64rpx; height: 64rpx;" src="/static/image/icon-2.png">
					</image>
				</view>

				<!-- <view class="operation-flex">
          <image
            class="operation-img"
            src="../../assets/details/2.png"
            mode=""
          ></image>
          <view>
            <view class="operation-text">订单续时</view>
            <view class="operation-text1"
              >延长订单使用时长，防止后续有人预定</view
            >
          </view>
          <view class="operation-btn">我要续时</view>
        </view>
		</view> -->
				<!-- <view class="bottom">
          <view class="bottom-flex">
            <image
              class="bottom-img1"
              src="../../assets/details/7.png"
              mode=""
            ></image>
            <view class="bottom-text">导航到店</view>
          </view>
          <view class="bottom-flex">
            <image
              class="bottom-img"
              src="../../assets/details/4.png"
              mode=""
            ></image>
            <view class="bottom-text">更换会议</view>
          </view>
          <view class="bottom-flex">
            <image
              class="bottom-img"
              src="../../assets/details/6.png"
              mode=""
            ></image>
            <view class="bottom-text">分享好友</view>
          </view>
          <view class="bottom-flex">
            <image
              class="bottom-img2"
              src="../../assets/details/5.png"
              mode=""
            ></image>
            <view class="bottom-text">会议WIFI</view>
          </view>
        </view> -->
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getPath,
		expOperation
	} from "@/api/main/main";
	import hdNavbar from "@/components/hd-navBar"
	import {
		setLock
	} from '@/api/main/order.js';
	export default {
		components: {
			hdNavbar
		},
		onLoad(e) {
			console.log('=======onLoad', this.data)
			this.data = JSON.parse(e.item)
			console.log('=======', this.data.status.code)
			this.getTopIconDistance();
		},
		data() {
			return {
				path: getPath(),
				height: "",
				paddingTop: "",
				data: {}
			};
		},
		methods: {
			expOperation,
			async order(row, orderId) {
				const confirm = new Promise((resolve) => {
					uni.showModal({
						title: '提示',
						content: `是否${row == 1 ? '【确认】' : '【取消】'}订单`,
						success: (res) => {
							if (res.confirm) {
								resolve(true); // 确认时 resolve
							} else {
								resolve(false); // 取消时 resolve
							}
						}
					});
				});

				// 2. 等待用户确认
				if (await confirm) {
					// 3. 执行异步请求（此时可使用 await）
					const apiRes = await expOperation({
						orderNo: orderId,
						status: row
					});
					this.data = apiRes.data;
					console.log("签到后返回结果-->", this.data);
					// 无需 $forceUpdate，数据响应式更新会自动触发视图渲染
				}
				console.log("order end");
			},
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: this.data.phone,
				})
			},
			jx(val) {
				if (val) {
					return val.substring(0, 10)
				}
			},
			jx2(val) {
				if (val) {
					return val.substring(10, 16)
				}
			},
			compareTimes(startTime, endTime) {
				if (startTime && endTime) {
					const dateFormat = "HH:mm";
					const date1 = new Date(startTime);
					const date2 = new Date(endTime);
					const diffInMilliseconds = Math.abs(date2 - date1);
					const diffInHours = diffInMilliseconds / (1000 * 60 * 60);
					return diffInHours.toFixed(2);
				}

			},
			open() {
				var than = this;
				setLock({
					orderNo: this.data.orderNo
				}).then(res => {
					if (res.code == 200) {
						if (!this.data.meetingTopic) {
							uni.showToast({
								title: '请联系物业公司' + this.data.phone,
								icon: 'none'
							})
							setTimeout(() => {
								uni.makePhoneCall({
									phoneNumber: this.data.phone //仅为示例
								});
							}, 2000)
							return;
						}
						uni.showToast({
							title: '开锁成功',
							icon: 'none'
						})
					}
				})
			},
			getTopIconDistance() {
				uni.getSystemInfo({
					success: (res) => {
						// 获取手机顶部状态栏的高度
						const statusBarHeight = res.statusBarHeight || 0;

						// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
						const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
						const navBarHeight =
							menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

						// 计算顶部图标距离
						const topIconDistance = statusBarHeight + navBarHeight;

						this.height = topIconDistance;
						this.paddingTop = statusBarHeight;
					},
					fail: (err) => {
						console.error("获取系统信息失败:", err);
					},
				});
			},
			goUrl() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss">
	.page {
		height: 113vh;
		background: rgba(245, 245, 245, 1);
	}

	.head {
		width: 750rpx;
		background: linear-gradient(180deg,
				rgba(214, 237, 223, 1) 0%,
				rgba(237, 247, 241, 0) 100%);
		z-index: 2;
	}

	.title {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title-return {
		position: absolute;
		left: 20rpx;
		top: 116rpx;
		width: 34rpx;
		height: 32rpx;
	}

	.time {
		display: flex;
		justify-content: space-around;
	}

	.content-title {
		margin-top: 10rpx;
	}

	.pwd-font {
		color: #FF6B6B;
	}

	.hour {
		font-size: 52rpx;
		font-weight: 500;
	}

	.time-flex {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.day {
		font-size: 28rpx;
		font-weight: 500;
	}

	.sum-text {
		margin-top: 20rpx;
		width: 200rpx;
		border: 4rpx dashed rgba(100, 194, 149, 1);
	}

	.text {
		text-align: center;
	}

	.list {
		padding: 33rpx;
		z-index: 99;
	}

	.item {
		width: 684rpx;
		height: 100%;
		opacity: 1;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		padding: 26rpx 22rpx;
	}

	.item-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head-title {
		font-size: 34rpx;
		font-weight: 500;
		color: rgba(34, 34, 34, 1);
	}

	.head-type {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(100, 194, 149, 1);
	}

	.item-content {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.content-img {
		width: 210rpx;
		height: 300rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.item-order {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.init {
		width: 100%;
		border: 2rpx solid rgba(240, 240, 240, 1);
		margin: 30rpx 0;
	}

	.operation {
		padding: 33rpx;
		margin-top: 30rpx;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
	}

	.operation-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 618rpx;
		height: 144rpx;
		border-radius: 18rpx;
		background: rgba(245, 245, 245, 1);
		margin-top: 30rpx;
		padding: 0 26rpx;
	}

	.operation-img {
		width: 30rpx;
		height: 34rpx;
	}

	.operation-text {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 46rpx;
		// color: rgba(34, 34, 34, 1);
	}

	.operation-text1 {
		width: 360rpx;
		margin-top: 10rpx;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: rgba(153, 153, 153, 1);
	}

	.operation-btn {
		width: 120rpx;
		height: 66rpx;
		border-radius: 32rpx;
		background: rgba(245, 245, 245, 1);

		border: 2rpx solid rgba(100, 194, 149, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(100, 194, 149, 1);
	}

	.bottom {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.bottom-img {
		width: 43rpx;
		height: 43rpx;
	}

	.bottom-img1 {
		width: 37rpx;
		height: 48rpx;
	}

	.bottom-img2 {
		width: 48rpx;
		height: 43rpx;
	}

	.bottom-flex {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.bottom-text {
		font-size: 30rpx;
		font-weight: 400;
		margin-top: 10rpx;
	}


	.operation-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 左右内容分离 */
		width: 100%;
		/* 占满父容器宽度 */
		height: auto;
		/* 自适应高度 */
		padding: 26rpx;
		/* 统一内边距 */
		gap: 20rpx;
		/* 左右内容间距 */
	}

	.flex-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		/* 图标与文本间距 */
	}

	.operation-content {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		/* 文本行间距 */
	}

	.flex-right {
		flex-shrink: 0;
		/* 按钮不被压缩 */
	}

	.operation-btn {
		width: 120rpx;
		/* 固定按钮宽度 */
		height: 56rpx;
		/* 调整按钮高度 */
		border-radius: 28rpx;
		/* 优化圆角 */
		font-size: 28rpx;
		/* 微调字体大小 */
	}
</style>